<template>
  <view :style="viewColor">
  	<view class="tabs-container"  :style="[boxStyle]">
  	  <!-- 选项卡标题区域 -->
  	  <view class="tabs-header">
  	
  	      <view class="tabs-wrapper">
  	        <view 
  	          v-for="(tab, index) in tabList" 
  	          :key="index"
  	          class="tab-item"
  	          :class="{ active: currentIndex === index }"
  	          @click="handleTabClick(index,tab)"
  	          :id="`tab-${index}`"
			  v-if="tab.show"
  	        >
  	          <view class="">
  	          	<view class="" >
  	          		<view class="display-flex-column display-flex-align-center" >
  							<view  style="width: 48px;height: 48px;" v-if='currentIndex === index'>
  								<image  style="width: 48px;height:48px;" :src="tab.imgList[0]" mode=""></image>
  							</view>
							<view class="display-flex display-flex-align-center display-flex-justify-center"  style="width: 48px;height: 48px;" v-else>
								<image  style="width: 38px;height: 38px;" :src="tab.imgList[1]" mode=""></image>				
							</view>
  							<view  v-if='currentIndex === index' class="tab-title display-flex" style=" height: 25px">
  								<view class=""  style="align-self: flex-end;">
  									{{tab['title']}}
  								</view>
  							</view>
							<view v-else class="tab-title display-flex" style=" height: 25px">
								<view class="" style="align-self: flex-end;">
									{{tab['title']}}
								</view>
							</view>
  	          		</view>
  	
  	          	</view>
  	
  	          </view>
  	        </view>
  	        <!-- 滑动指示条 -->
  	        <view 
  	          class="triangle-up"
  	          :style="{
  	            transform: `translateX(${sliderLeft}px)`,
  	          
  	          }"
  	        ></view>
  	      </view>
  	  </view>
  	
  	  <!-- 内容区域 -->
  	  <view class="tabs-content">
  	    <view class="" v-show="currentIndex == 0">
  	    	<tabScenic></tabScenic>
		</view>
  		  <view class="" v-show="currentIndex == 1">
  		  	<tabBus :isOnShow="isOnShow"></tabBus>
  		  </view>
  		  <view class=""  v-show="currentIndex == 2">
  		  <tabDingzhi :isOnShow="isOnShow"> </tabDingzhi>
  		  </view>
  		  <view class="" v-show="currentIndex == 3">
  		  	<tabBaoche  :isOnShow="isOnShow"></tabBaoche>
  		  </view>
		  <view class="" v-show="currentIndex == 5">
		  	<tabHotel  :isOnShow="isOnShow"></tabHotel>
		  </view>
  	  </view>
  	</view>
  </view>
</template>

<script>
	import { configMap } from "@/utils";
	import { mapGetters } from "vuex";

	import Cache from '@/utils/cache';
	import {  getCityInfo } from '@/api/api.js';
	import { CITY_INFO ,USER_LOCATION} from '@/config/cache'
	import tabScenic from './tab_scenic.vue';
	import tabBus from './tab_bus.vue';
	import tabDingzhi from './tab_dingzhi.vue';
	import tabBaoche from './tab_baoche.vue';
	import tabHotel from './tab_hotel.vue';
export default {
	

  name: "AnimatedTabs",
  props: {
	isOnShow: {
		type: Boolean
	} ,
	dataConfig: {
		type: Object,
		default: () => {}
	},
  //   tabList: {
  //     type: Array,
  //     default: () => [
  //       { 
		//    id: 1,	
		//    title: '门票',
		//    image: 'https://qiniu.gzyxly.cn/def/26137202511010053184609.png' ,
		//  },
  //       { 
		// 	id: 2,	
		// 	title: '直通车', 
		// 	image: 'https://qiniu.gzyxly.cn/def/ab965202510311739014764.png' ,
		// },
  //       { 
		// 	id: 3,	
		// 	title: '定制游', 
		// 	image: 'https://qiniu.gzyxly.cn/def/ab965202510311739014764.png' ,
		// },
  //       { 
		// 	id: 4,
		// 	title: '小团包车', 
		// 	image: 'https://qiniu.gzyxly.cn/def/ab965202510311739014764.png' ,
		// },
		// {
		// 	id: 6, 
		// 	title: '跟团游', 
		// 	image: 'https://qiniu.gzyxly.cn/def/ab965202510311739014764.png' ,
		// },
		// {
		// 	id: 7, 
		// 	title: '酒店', 
		// 	image: 'https://qiniu.gzyxly.cn/def/ab965202510311739014764.png' ,
		// },
  //     ]
  //   }
  },
	computed: {
			...mapGetters(['isLogin','viewColor']),

			boxStyle(){
				return {
					padding: `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
					marginTop: `${this.dataConfig.mbConfig.val * 2}rpx`,
				}
			},
		},
components: {tabScenic,tabBus,tabDingzhi,tabBaoche,tabHotel},
data() {
    return {
      currentIndex: 0,
      sliderLeft: 0,
      sliderWidth: 0,
      scrollLeft: 0,
      tabInfo: [],
	  where: {
	  	page:1,
	  	limit:5,
	  	lng: '',
	  	lat: '',
	  },
	  searchScenicValue: '',
	  tabList: [],
    }
  },
  mounted() {
	  console.log('dataConfig',this.dataConfig)
	  this.tabList = this.dataConfig.tabMenuList;
	   console.log('this.tabList',this.tabList)
	  this.currentIndex =  this.dataConfig.selectConfig.activeValue;
    this.$nextTick(() => {
      setTimeout(() => {
        this.calculateTabPosition();
      }, 100);
    });
  },
  methods: {
	searchScenicHand(){
		uni.navigateTo({
			url: `/pages/scenic/index/index?searchValue=${this.searchScenicValue}`
		})	
	}, 
	setScenicValue(event){
		this.$set(this, 'searchScenicValue', event.detail.value);
	},
	
	
	goScenicDetail(item) {
		uni.navigateTo({
			url: `/pages/scenic/detail/index?id=${item.id}`
		})	
		
	},
    // 计算选项卡位置信息
    calculateTabPosition() {
      const query = uni.createSelectorQuery().in(this);
      const promises = [];
      
      this.tabList.forEach((tab, index) => {
        if(tab.show){
			promises.push(new Promise((resolve) => {
			  query.select(`#tab-${index}`).boundingClientRect((rect) => {
			    if (rect) {
			      resolve({
			        left: rect.left,
			        width: rect.width,
			        index: index
			      });
			    }
			  }).exec();
			}));
		}
      });
      
      Promise.all(promises).then((results) => {
        this.tabInfo = results.sort((a, b) => a.index - b.index);
        this.updateSliderPosition(this.currentIndex);
      });
    },
    
    // 处理选项卡点击
    handleTabClick(index,tab) {
      if (this.currentIndex === index) return;
      if(tab.isLink) {
		  if(!tab.link){
			  return this.$util.Tips({title: "未配置跳转链接"})
		  } else {
			  uni.navigateTo({
			  	url:tab.link
			  })
		  }
		  
		  return;
	  }
      this.currentIndex = index;
      this.updateSliderPosition(index);
    },
    
    // 更新滑块位置
    updateSliderPosition(index) {
      if (!this.tabInfo[index]) return;
      
      const tab = this.tabInfo[index];
      this.sliderLeft = tab.left + 12;
      this.sliderWidth = tab.width;
    },
    
 
    // 处理swiper切换
    onSwiperChange(e) {
      const index = e.detail.current;
      this.currentIndex = index;
      this.updateSliderPosition(index);
      this.adjustScrollPosition(index);
      this.$emit('tab-change', index);
    }
  }
}
</script>

<style  lang="scss">
.tabs-container {
  /* padding-top: 15px; */
  width: 100%;
  /* background: #fff; */
  border-radius: 12rpx;
  overflow: hidden;
  /* box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08); */
}

/* 选项卡头部样式 */
.tabs-header {
  position: relative;
  /* background: #fff; */
  height: 80px;
}

.scroll-view {
  white-space: nowrap;
  width: 100%;
  height: 88rpx;
}

.tabs-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  /* padding: 0 24rpx; */
  justify-content: space-around;
}

.tab-item {
  position: relative;
  /* padding: 0 20rpx; */
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #666;
  transition: color 0.3s ease;
  z-index: 2;
  width: 20%
}

.tab-item.active {
  color: #000000;
  font-weight: 700;
  font-size: 13px !important;
}

.tab-text {
  position: relative;
  z-index: 2;
}

/* 滑动指示条样式 */
.tab-slider {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4rpx;
  background: linear-gradient(90deg, #007AFF, #00C6FF);
  border-radius: 4rpx;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
}

/* 内容区域样式 */
.tabs-content {
  // height: 400rpx;
  background: #ffffff;
  border-radius: 10px;
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 15px 10px;
  // box-shadow: 10rpx 0rpx 25rpx 10rpx #DEE4E7;
  box-shadow: 1rpx 0rpx 25rpx 0rpx #DEE4E7
  
}

.swiper-container {
  height: 100%;
}

.swiper-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48rpx;
}

.content-item {
  text-align: center;
}

.content-title {
  display: block;
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
}

.content-desc {
  display: block;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

/* 动画效果 */
.tab-slider {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-item {
  transition: all 0.3s ease;
}

/* 响应式适配 */
@media (max-width: 750rpx) {
  .tabs-wrapper {
    padding: 0 16rpx;
  }
  
  .tab-item {
    padding: 0 24rpx;
    font-size: 28rpx;
  }
}


.triangle-up {
	/* 基础尺寸设置 */
	width: 30px;
	height: 17px;
	/* 隐藏溢出部分 */
	overflow: hidden;
	position: absolute;
	bottom: -20px;
	left: 0;
}
.triangle-up {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
   width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.triangle-up::after {
	content: "";
	position: absolute;
	/* 创建一个正方形 */
	width: 28px;
	height: 28px;
	/* 背景色设置为白色 */
	background: #ffffff;
	/* 添加圆角 */
	border-radius: 6px;
	/* 旋转45度形成菱形 */
	transform: rotate(45deg);
	/* 定位调整形成向上的三角形 */
	top: 12px;
	left: 6px;
	/* 添加阴影增强立体感（可选） */
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.search-box{
	border-radius: 20px;
	border: 1px solid var(--view-theme);
	height: 35px;
	margin: 0 10px ;
	display: flex;
	align-items: center;
}
.search-ph{
	font-size: 12px;
	color: #d3d3d3;
	margin-left: 10px;
}
.search-button{
	width: 50px;
	border-radius: 20px;
	background-image: linear-gradient(270deg, var(--view-bntColor22) 0%, var(--view-bntColor21) 100%);
    margin-right: 5px;
	margin-left: auto;
	color: #ffffff;
	height: 24px;
	text-align: center;
	line-height: 24px;
	font-weight: 700;
}
.scenic-box{
	margin: 10px;
	
}
.scenic-title-box{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.scenic-title{
	font-size: 16px;
	font-weight: 700;
	color: #000;
}
.scenic-tip {
	font-size: 12px;
	color: #c8c8c8;
	margin-left: auto;
}

.wf-page1 .wf-item{
	.name{
		font-weight: 600;
		font-size: 13px;
		overflow:hidden; 
		text-overflow: ellipsis; 
		display: -webkit-box; 
		-webkit-line-clamp: 1; 
		-webkit-box-orient: vertical;
		text-align: left;
	}
}


.productList .list {
	// padding: 0 20rpx;
	// margin-top: 168rpx;
}
.productList .list.on {
	background-color: #fff;
	padding-top: 24rpx;
}

.productList .list .item .text .money {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		font-weight: bold;
		margin-top: 10rpx;
		color: var(--view-priceColor);
	}
	.productList .list .item .text .money .num {
		font-size: 34rpx;
	}
	.productList .distance {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #999999;
		.icon-ic_right {
			font-size: 24rpx;
			line-height: 24rpx;
		}
	}
	.productList .list .item .text .money .ticket-big {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 163rpx;
		height: 28rpx;
		margin-left: 10rpx;
		background-image: url(~static/images/yh.png);
		background-size: 100% 100%;
		font-size: 20rpx;
		font-weight: normal;
		padding: 0 10rpx;
	}
	.productList .list .item .text .score {
		margin-top: 10rpx;
		color: #737373;
		font-size: 22rpx;
	}
	.productList .list .item .text .company {
		display: flex;
		align-items: center;
		color: #737373;
		font-size: 22rpx;
		margin-top: 6rpx;
		.name {
			display: inline-block;
			width: 200rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.flex {
			display: flex;
			align-items: center;
			margin-left: 10rpx;
			color: #282828;
			.iconfont {
				font-size: 20rpx;
				margin-top: 4rpx;
			}
		}
	}
	.productList .list .item .foot-bar {
		width: 100%;
		height: 52rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-image: linear-gradient(-90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
		border-radius: 0px 0px 16rpx 16rpx;
		color: #fff;
		font-size: 24rpx;
		.icon-fenxiang {
			font-size: 24rpx;
			margin-right: 10rpx;
		}
		&.on {
			position: absolute;
			right: 0;
			bottom: 30rpx;
			width: 180rpx;
			height: 44rpx;
			border-radius: 22rpx;
		}
	}
	.scenic-level {
	    padding: 0 4px;
	    height: 16px;
	    line-height: 16px;
	    background: rgba(238, 241, 246, .6);
	    border-radius: 2px;
	    text-align: center;
	    margin-left: 4px;
	    color: #5678a8;
	    font-size: 10px;
	}	
	
	.productList .list .item.on {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-bottom: 32rpx;
			position: relative;
			margin-right: 10px;
		}
		.productList .list .item .pictrue.on {
			position: relative;
			width: 220rpx;
			// height: 250rpx;
			// min-height: 200px;
			max-height: 250px;
			.border-picture {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: center/cover no-repeat;
				border-radius: 16rpx;
			}
		}
		.productList .list .item .pictrue image {
			width: 220rpx;
			// height: 240rpx;
			// min-height: 200px;
			// max-height: 250px;
			border-radius: 20rpx 20rpx 0 0;
		}
		.productList .list .item .pictrue image.on {
			border-radius: 16rpx;
			width: 220rpx;
			height: 100%;
			// height: 250rpx;
		}
		.productList .list .item .text {
			font-size: 30rpx;
			color: #222;
			width: 460rpx;
			padding: 0 0 0 22rpx;
			.name{
				font-size:30rpx;
				font-weight: 700;
				margin-bottom: 5px;
			}
		}
		.productList .list .item .text.on {
			padding: 8rpx 0 0;
			// width: 420rpx;
			margin-left: 12px;
			// height: 250rpx;
		}
	.item_tags{
		margin-top: 8px;
	}
	.item_tags .tags_item {
		display: inline-block;
		font-size: 20rpx;
		text-align: center;
		border-radius: 5rpx;
		padding: 0 4rpx;
		line-height: 28rpx;
		margin-right: 8rpx;
	}
	.item_tags .tags_item.ticket{
		color: #E93323;
		border: 1px solid #E93323;
	}
	.item_tags .tags_item.delivery{
		color: #FF9000;
		border: 1px solid #FF9000;
	}
	.item_tags .tags_item.labels{
		color: var(--view-theme);;
		border: 1px solid #cad8f7;
	}
	
</style>